<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>批量导入</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!--<script src="../assets/js/jquery.min.js"></script>-->
    <script src="../common/header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            微信号批量导入管理&nbsp;&nbsp;
                            <a href="javascript:importLayer();" data-type="t" class="layui-btn layui-btn-sm">导入文件(A16或62数据)</a>
                        </div>
                        <div class="layui-card-body">
                            <table id="LAY-wechat-import" lay-filter="LAY-wechat-import"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var uploading = false;
        var importLayer;
        var reloadList;
        var displayPreview;
        var confirmFile;
        var cancelFile;
        layui.use(['table', 'element', 'laytpl', 'form', 'upload'], function () {
            var $ = layui.$
                , layer = layui.layer
                , table = layui.table
                , form = layui.form
                , laytpl = layui.laytpl
                , element = layui.element
                , upload = layui.upload;

            element.init();

            //第一个实例
            table.render({
                elem: '#LAY-wechat-import'
//            ,height: 315
                , url: '/wechat_import/list_data' //数据接口
                , page: true //开启分页
                , cols: [[ //表头
//                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    {field: 'created', title: '导入时间', width: 170, fixed: 'left', sort: true}
                    , {field: 'orig_name', title: '文件', width: 300, fixed: 'left', sort: true}
                    , {field: 'type', title: '数据类型', width: 140, templet: '#typeTpl'}
                    , {field: 'version', title: '登录版本', width: 140, templet: '#versionTpl'}
                    , {field: 'msg', title: '提示信息'}
                    , {field: 'status', title: '状态', sort: true, width: 100, templet: '#statusTpl', unresize: true}
                    , {fixed: 'right', width: 150, align: 'center', toolbar: '#barDemo'}
                ]]
                , title: '列表'
                , error: function (err) {
                    if (err.code === 20002) {
                        layer.open({
                            type: 1,
                            title: false,//不显示标题栏
                            closeBtn: false,
                            area: '300px;',
                            shade: 0.8,
                            id: 'LAY_layuipro', //设定一个id，防止重复弹出
                            btn: ['重新登录'],
                            btnAlign: 'c',
                            moveType: 1,
                            content: '<div style="padding: 60px 30px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">您的登录信息已失效，请重新登录！</div>',
                            success: function (layero) {
                                var btn = layero.find('.layui-layer-btn');
                                btn.find('.layui-layer-btn0').attr({
                                    href: '../login/login.html'
                                });
                            }
                        });
                    } else {
                        layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                    }
                }
            });

            importLayer = function () {
                var board_html = tpl_import.innerHTML;
                layer.open({
                    type: 1,
                    area: '600px',
                    title: '批量导入微信号（按文件名分组）',
                    closeBtn: 0,
                    shadeClose: false,
                    content: board_html,
                    btn: ['提交', '取消'],
                    success: function () {
                        form.render();
                    },
                    yes: function (index, layero) {
                        var formData = new FormData();
                        var phone_split = parseInt($('input[name=phone_split]').val())
                        var wxqq_split = parseInt($('input[name=wxqq_split]').val())
                        var day_add = parseInt($('input[name=day_add]').val())
                        var type = parseInt($('input[name=type]').val())
                        formData.append('file', document.getElementById('weChatFile').files[0])
                        service.post("api/v1/wxinfos/import?day_add=" + day_add + "&phone_split=" + phone_split + "&wxqq_split=" + wxqq_split + "&type=" + type, formData,
                            {headers: {'Content-Type': false}}
                        ).then((response) => {
                            if (response.code === 200) {
                                layer.msg('上传成功！', {offset: '45vh', icon: 1, time: 2000}, function () {
                                    layer.close(index);
                                })
                            } else {
                                layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                            }
                            uploading = false;
                        }).catch((err) => {
                            layer.msg('哦噢，网络开小差了', {offset: '45vh', icon: 5, time: 2000});
                            uploading = false;
                        })
                    }
                    , btn2: function (index, layero) {
                        setTimeout(function () {
                            reloadList();
                        }, 1000);
                    }
                });
            };

            displayPreview = function (id) {
                var post = {
                    id: id
                };
                $.ajax({
                    type: "POST",
                    url: "/wechat_import/preview",
                    data: post,
                    success: function (response) {
                        var dataObj = $.parseJSON(response);
                        if (dataObj.code === 0) {
                            var previewData = dataObj.data;
                            var board_html = '';
                            var getTpl = tpl_preview.innerHTML;
                            var data = {'id': id, 'previewData': previewData};
                            laytpl(getTpl).render(data, function (html) {
                                board_html = $.trim(html);
                            });
                            layer.open({
                                type: 1,
                                title: '数据文件预览',
                                area: ['900px', '450px'],
                                shadeClose: false,
                                content: board_html,
                                btn: ['确认格式正确', '取消'],
                                yes: function (index, layero) {
                                    confirmFile(index);
                                }
                                , btn2: function (index, layero) {
                                    setTimeout(function () {
                                        reloadList();
                                    }, 1000);
                                }
                            });
                        } else {
                            layer.msg(dataObj.msg, {offset: '45vh', icon: 5, time: 2000});
                        }
                    },
                    error: function (request, status, error) {
                        layer.msg('哦噢，网络开小差了', {offset: '45vh', icon: 5, time: 2000});
                    }
                });
            };

            confirmFile = function (layerIndex) {
                layer.confirm('确认格式正确？', function (index) {
                    var id = $('#id').val();
                    if (id > 0) {
                        var post = {
                            id: id
                        };
                        $.ajax({
                            type: "POST",
                            url: "/wechat_import/confirm",
                            data: post,
                            success: function (response) {
                                var dataObj = $.parseJSON(response);
                                if (dataObj.code === 0) {
                                    layer.msg(dataObj.msg, {offset: '45vh', icon: 1, time: 2000});
                                } else {
                                    layer.msg(dataObj.msg, {offset: '45vh', icon: 5, time: 2000});
                                }
                            },
                            error: function (request, status, error) {
                                layer.msg('哦噢，网络开小差了', {offset: '45vh', icon: 5, time: 2000});
                            }
                        });
                        layer.close(layerIndex);
                        setTimeout(function () {
                            reloadList();
                        }, 1000);
                    } else {
                        layer.msg('文件ID不存在', {offset: '45vh', icon: 5, time: 2000});
                    }
                });
            };

            cancelFile = function (id) {
                layer.confirm('确认取消导入？', function (index) {
                    if (id > 0) {
                        var post = {
                            id: id
                        };
                        $.ajax({
                            type: "POST",
                            url: "/wechat_import/cancel",
                            data: post,
                            success: function (response) {
                                var dataObj = $.parseJSON(response);
                                if (dataObj.code === 0) {
                                    layer.msg(dataObj.msg, {offset: '45vh', icon: 1, time: 2000});
                                } else {
                                    layer.msg(dataObj.msg, {offset: '45vh', icon: 5, time: 2000});
                                }
                            },
                            error: function (request, status, error) {
                                layer.msg('哦噢，网络开小差了', {offset: '45vh', icon: 5, time: 2000});
                            }
                        });
                        setTimeout(function () {
                            reloadList();
                        }, 1000);
                    } else {
                        layer.msg('文件ID不存在', {offset: '45vh', icon: 5, time: 2000});
                    }
                });
            };

            reloadList = function () {
                var status = $('#status').find("option:selected").val();
                table.reload('LAY-wechat-import', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            };

            form.on('radio(deviceTypeFilter)', function (data) {
                console.log(data.elem); //得到radio原始DOM对象
                console.log(data.value); //被点击的radio的value值
                if (data.value == 1 || data.value == 3) {
                    $('#android_version').removeClass('layui-hide');
                    $('#ios_version').addClass('layui-hide');
                } else if (data.value == 2) {
                    $('#android_version').addClass('layui-hide');
                    $('#ios_version').removeClass('layui-hide');
                } else {
                    $('#android_version').addClass('layui-hide');
                    $('#ios_version').addClass('layui-hide');
                }
            });
        });
    </script>
    <script type="text/html" id="barDemo">
        {{# if(d.status == 0){ }}
        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="displayPreview({{d.id}});">预览</button>
        <button class="layui-btn layui-btn-sm layui-btn-warm" onclick="cancelFile({{d.id}});">取消</button>
        {{# } else if(d.status == 3){ }}
        <a class="layui-btn layui-btn-sm" href="/wechat_import/detail/{{d.id}}">结果</a>
        {{# } }}
    </script>
    <script type="text/html" id="statusTpl">
        {{# if(d.status == 0){ }}
        <span style="color: black;">等待确认</span>
        {{# } else if(d.status == 1){ }}
        <span style="color: orange;">等待处理</span>
        {{# } else if(d.status == 2){ }}
        <span style="color: blue;">正在处理</span>
        {{# } else if(d.status == 3){ }}
        <span style="color: green;">处理完成</span>
        {{# } else if(d.status == 4){ }}
        <span style="color: red;">处理失败</span>
        {{# } else if(d.status == 5){ }}
        <span style="color: black;">已取消</span>
        {{# } }}
    </script>
    <script type="text/html" id="typeTpl">
        {{# if(d.type == 1){ }}
        <span style="color: orange;">A16数据</span>
        {{# } else if(d.type == 2){ }}
        <span style="color: blue;">62数据</span>
        {{# } else if(d.type == 3){ }}
        <span style="color: blue;">A16数据特别版</span>
        {{# } }}
    </script>
    <script id="tpl_import" type="text/html">
        <form id="uploadForm" class="layui-form" action="" enctype="multipart/form-data">
            <div class="layui-form-item">
                <label class="layui-form-label">数据类型</label>
                <div class="">
                    <div class="">
                        <input type="radio" name="type" value="10" title="A16数据" checked lay-verify="type"
                               lay-filter="type">
                        <input type="radio" name="type" value="20" title="62数据" lay-verify="type" lay-filter="type">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">轮</label>
                <div class="layui-input-inline">
                    <input type="text" name="day_add" lay-verify="day_add" autocomplete="off" value="10"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机间隔</label>
                <div class="layui-input-inline">
                    <input type="text" name="phone_split" lay-verify="phone_split" autocomplete="off"
                           placeholder="手机间隔" value="10" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">微信qq间隔</label>
                <div class="layui-input-inline">
                    <input type="text" name="wxqq_split" value="10" lay-verify="wxqq_split" autocomplete="off"
                           placeholder="手机间隔"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">数据文件</label>
                <div class="layui-input-inline">
                    <input type="file" id="weChatFile" name="weChatFile" accept="text/plain" placeholder="请上传文件"
                           required
                           autocomplete="off" class="layui-input">
                </div>
            </div>
        </form>
    </script>
    <script id="tpl_preview" type="text/html">
        <input type="hidden" id="id" name="id" value="{{d.id}}">
        <table class="layui-table" lay-size="sm">
            <tbody>
            {{# layui.each(d.previewData, function(index, rows){ }}
            <tr>
                {{# layui.each(rows, function(index, item){ }}
                <td>{{item}}</td>
                {{# }); }}
            </tr>
            {{# }); }}
            </tbody>
        </table>
    </script>
    <script type="text/html" id="versionTpl">
        {{ d.version || '默认' }}
    </script>
</div>
</body>
</html>
